<template>
  <div>
  <div v-if="this.ranktype=='gpu'">
    <div class="one" @mouseover="inside" @mouseout="out">
<el-popover
  placement="bottom"

  trigger="click"
  >
  {{1111111}}

        <div class="left" slot="reference">
            <div class="inner">
            <div class="innerleft" ref="left">{{all.gpuName}}</div>
            </div>
        </div>
    </el-popover>
       
        <div class="zhong"  ></div>
        <el-popover
  placement="bottom"
  trigger="click"
  >
  {{1111111}}
        <div class="right" slot="reference" >
            <div class="innerright" ref="right">{{all.gpuName}}</div>
        </div>
        </el-popover>
    </div>
  </div>
  <div v-if="this.ranktype=='cpumulti'">
    <div class="one" @mouseover="inside" @mouseout="out">
        <div class="left">
            <div class="inner">
            <div class="cpuinnerleft" ref="left">{{all.cpuName}}</div>
            </div>
        </div>
        <div class="zhong" ></div>
        <div class="right" >
            <div class="cpuinnerright" ref="right">{{all.cpuName}}</div>
        </div>
    </div>
 
  </div>
  <div v-if="this.ranktype=='atx'">
    <div class="one" @mouseover="inside" @mouseout="out">
        <div class="left">
            <div class="inner">
            <div class="atxinnerleft" ref="left">{{all.atxName}}</div>
            </div>
        </div>
        <div class="zhong" ></div>
        </div>
    </div>
    <div v-if="this.ranktype=='memory'">
    <div class="one" @mouseover="inside" @mouseout="out">
        <div class="left">
            <div class="inner">
            <div class="memoryinnerleft" ref="left">{{all.memoryName}}</div>
            </div>
        </div>
        <div class="zhong" ></div>
        </div>
    </div>
  </div>

</template>

<script>
    import alldata from "./alldata.vue"
export default {
    name:"onedata",
    data(){
        return{
            Type:this.gpuType,
            insides:false
        }
    },
    components:{alldata},
    props:["all","ranktype"],
    mounted(){
        console.log("all",this.all)
        if(this.ranktype=="gpu")
            { 
                this.$refs.left.style.width=this.all.gpuIndex+"%"
                if(this.all.gpuType=="NVIDIA"){
                    this.$refs.right.style.visibility="hidden"
                }
                this.$refs.right.style.width=this.all.gpuIndex+"%"
                if(this.all.gpuType=="AMD"){
                    this.$refs.left.style.visibility="hidden"
                }
            }else if(this.ranktype=="cpumulti"){
                this.$refs.left.style.width=this.all.cpuIndex+"%"
                if(this.all.cpuType=="Core"){
                    this.$refs.right.style.visibility="hidden"
                }
                this.$refs.right.style.width=this.all.cpuIndex+"%"
                if(this.all.cpuType=="Ryzen"){
                    this.$refs.left.style.visibility="hidden"
                }
            }else if(this.ranktype=="atx"){
                this.$refs.left.style.width=this.all.atxIndex+"%"
                this.$refs.right.style.visibility="hidden"
            }else if(this.ranktype=="memory"){
                this.$refs.left.style.width=this.all.memoryIndex+"%"
                this.$refs.right.style.visibility="hidden"
            }
    },
    methods:{
        inside(){
            this.insides=true
        },
        out(){
            this.insides=false
        }
    },

}
</script>

<style scoped>
.one{
 font-size: 10rpx;
width: 400px;
height: 30px;
}
.left{
    display: inline-block;

    width: 45%;
height: 100%;
}
.right{
    display: inline-block;
    width: 45%;
height: 100%;
margin-top: auto;
margin-bottom: auto;

}
.zhong{
    display: inline-block;
    width: 0%;
height: 100%;
/* background-color: rgb(25, 29, 30); */
}
.innerleft{
    box-shadow: #727374 3px 5px 5px ;
    padding-left: 10px;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    font-size: 12px;
    color: rgb(249, 250, 207);
    height: 100%;
    line-height: 200%;
background-color: rgb(2, 155, 38);
background: linear-gradient(125deg,#343434,#727374,#14a24a,#05892f,#377500,#d6d5d7);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 15s infinite;
}
.innerright{
    padding-left: 10px;
    box-shadow: #727374 3px 5px 5px ;
    color: rgb(217, 234, 250);
    border-radius: 0px 5px 5px 0px;
    font-size: 12px;
    height: 100%;
    line-height: 200%;
background-color: rgb(174, 16, 16);
background: linear-gradient(125deg,#f35656,#df1e1e,#ab1902,#e87305,#ec6d24,#fc9712);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 10s infinite;
}
.inner{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}
@keyframes gradient-move{
    /*设置图片移动位置，左上到右下到左上*/
        0%
        {background-position:0% 50%}
        50%
        {
         background-position:100% 50% 
        }
        100%
        {background-position:0% 50%}

        
    }
    .alldata{
        margin-left: 30px;
    }

    .cpuinnerleft{
    box-shadow: #727374 3px 5px 5px ;
    padding-left: 10px;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    font-size: 12px;
    color: rgb(249, 250, 207);
    height: 100%;
    line-height: 200%;

    background: linear-gradient(125deg,#646464,#757f89,#74bec6,#4283b5,#095480,#0434b9);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 15s infinite;
}
.cpuinnerright{
    padding-left: 10px;
    box-shadow: #727374 3px 5px 5px ;
    color: rgb(217, 234, 250);
    border-radius: 0px 5px 5px 0px;
    font-size: 12px;
    height: 100%;
    line-height: 200%;
background-color: rgb(174, 16, 16);
background: linear-gradient(125deg,#f35656,#df1e1e,#ab1902,#e87305,#ec6d24,#fc9712);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 10s infinite;
}

.cpusingleinnerleft{
    box-shadow: #727374 3px 5px 5px ;
    padding-left: 10px;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    font-size: 12px;
    color: rgb(249, 250, 207);
    height: 100%;
    line-height: 200%;

    background-color: rgb(2, 155, 38);
background: linear-gradient(125deg,#646464,#757f89,#74bec6,#4283b5,#095480,#0434b9);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 15s infinite;
}
.atxinnerleft{
    overflow: hidden;
    box-shadow: #727374 3px 5px 5px ;
    padding-left: 10px;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    font-size: 12px;
    color: rgb(249, 250, 207);
    height: 100%;
    line-height: 200%;

    background-color: rgb(2, 155, 38);
background: linear-gradient(125deg,#646464,#757f89,#74bec6,#4283b5,#095480,#0434b9);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 15s infinite;
}
.memoryinnerleft{
    overflow: hidden;
    box-shadow: #727374 3px 5px 5px ;
    padding-left: 10px;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    font-size: 12px;
    color: rgb(249, 250, 207);
    height: 100%;
    line-height: 200%;

    background-color: rgb(2, 155, 38);
background: linear-gradient(125deg,#646464,#757f89,#74bec6,#4283b5,#095480,#0434b9);
 /*设置渐变颜色*/
    background-size: 1000% 1000%;
/*设置渐变背景的大小*/
    animation: gradient-move 15s infinite;
}
</style>